<template>
  <div id="projectManage">
    <div class="navBar">
      <!-- 项目检索 -->
      <div class="projectSearch">
        <span>项目名称</span>
        <div class="searchInput">
          <el-autocomplete
            class="inline-input"
            v-model="inputProjectName"
            :fetch-suggestions="querySearch"
            placeholder="请输入项目名称"
            @select="handleSelect"
          ></el-autocomplete>
          <span
            :class="inputProjectName.length === 0?'icon-search':'icon-clear'"
            @click="clearSearchInput"
          ></span>
        </div>
      </div>
      <!-- 新增按钮 -->
      <div class="add" @click="addProject">
        <span></span>
        <span>新增</span>
      </div>
    </div>
    <div class="content">
      <!-- 项目表格 -->
      <div class="projectTabel">
        <el-table v-loading="isLoading" :data="tableData" stripe style="width: 100%">
          <template v-for="(item,index) in tableNavList">
            <el-table-column
              v-if="item.prop != 'oper'"
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              show-overflow-tooltip
              align="center"
            ></el-table-column>
            <el-table-column
              v-else
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              show-overflow-tooltip
              align="center"
            >
              <template slot-scope="scope">
                <template v-for="(operLi,index) in operList">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="导入.cmp文件"
                    placement="top-start"
                    v-if="operLi.name == 'import'"
                    :key="index"
                  >
                    <el-button
                      icon="el-icon-download"
                      circle
                      size="mini"
                      @click="importCmp(scope.$index, scope.row)"
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="导出.cmp文件"
                    placement="top-start"
                    v-else-if="operLi.name == 'export'"
                    :key="index"
                  >
                    <el-button
                      icon="el-icon-upload2"
                      circle
                      size="mini"
                      @click="exportCmp(scope.$index, scope.row)"
                    ></el-button>
                  </el-tooltip>
                  <el-button
                    v-else
                    :key="index"
                    size="mini"
                    round
                    @click="handleEdit(scope.$index, scope.row,operLi.type)"
                  >{{operLi.name}}</el-button>
                </template>
              </template>
            </el-table-column>
          </template>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="pagination" v-if="!isLoading">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="initPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="totalProject"
        ></el-pagination>
      </div>
    </div>
    <div class="functionList" v-if="isShowFun">
      <!-- 新增项目或修改 -->
      <div class="formContent" v-if="funShow.addProject || funShow.modify">
        <div class="top">
          <funTitle
            :title="funShow.modify?'修改':'新增项目'"
            :type="funShow.modify?'modify':'addProject'"
          />
        </div>
        <div class="funContent">
          <el-form
            :inline="true"
            size="mini"
            label-position="right"
            label-width="80px"
            :model="addProjectForm"
            ref="addProjectForm"
            :rules="formRules"
          >
            <el-form-item label="名称" prop="projectName">
              <el-input placeholder="请输入" v-model="addProjectForm.projectName"></el-input>
            </el-form-item>
            <el-form-item label="国家">
              <el-input placeholder="请输入" v-model="addProjectForm.country"></el-input>
            </el-form-item>
            <el-form-item label="省份">
              <el-input placeholder="请输入" v-model="addProjectForm.province"></el-input>
            </el-form-item>
            <el-form-item label="城市">
              <el-input placeholder="请输入" v-model="addProjectForm.city"></el-input>
            </el-form-item>
            <el-form-item label="区县">
              <el-input placeholder="请输入" v-model="addProjectForm.district"></el-input>
            </el-form-item>
            <el-form-item label="经营时间">
              <el-input placeholder="请输入" v-model="addProjectForm.time"></el-input>
            </el-form-item>
            <el-form-item label="经度">
              <el-input placeholder="请输入" v-model="addProjectForm.longitude"></el-input>
            </el-form-item>
            <el-form-item label="纬度">
              <el-input placeholder="请输入" v-model="addProjectForm.latitude"></el-input>
            </el-form-item>
            <el-form-item label="地址" size="small">
              <el-input type="textarea" v-model="addProjectForm.address"></el-input>
            </el-form-item>
            <el-form-item label="项目类型">
              <el-select v-model="addProjectForm.projectType" placeholder="请选择">
                <el-option label="商场" value="商场"></el-option>
                <el-option label="工位" value="工位"></el-option>
                <el-option label="医院" value="医院"></el-option>
                <el-option label="交通" value="交通"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="!funShow.modify" size="medium">
              <el-button round @click="closeFun('addProject')">取消</el-button>
              <el-button @click="submitAddProjectForm('addProjectForm')">确定</el-button>
            </el-form-item>
            <el-form-item v-else size="medium">
              <el-button round @click="closeFun('modify')">取消</el-button>
              <el-button @click="submitModifyForm('addProjectForm')">确定</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 项目菜单设置 -->
      <div class="formContent menuSetting" v-if="funShow.menuSetting">
        <div class="top">
          <funTitle title="项目菜单设置" type="menuSetting" />
        </div>
        <div class="funContent">
          <el-form
            size="mini"
            label-position="right"
            label-width="80px"
            :model="menuSettingForm"
            ref="menuSettingForm"
            :rules="formRules"
          >
            <el-form-item label="项目类型" prop="projectType">
              <el-select v-model="menuSettingForm.projectType" placeholder="请选择">
                <el-option label="商场" value="商场"></el-option>
                <el-option label="工位" value="工位"></el-option>
                <el-option label="医院" value="医院"></el-option>
                <el-option label="交通" value="交通"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="item.label" v-for="(item,index) in menuSettingData" :key="index">
              <el-checkbox-group v-model="menuSettingForm.menuSetting[item.model]">
                <el-checkbox
                  :label="e.id"
                  name="type"
                  v-for="(e,i) in item.menuChild"
                  :key="i"
                >{{e.menuName}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item size="medium">
              <el-button round @click="closeFun('menuSetting')">取消</el-button>
              <el-button @click="submitMenuSettingForm('menuSettingForm')">确定</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 图层管理 -->
      <div class="formContent layoutManage" v-if="funShow.layoutManage">
        <div class="top">
          <funTitle title="图层管理" type="layoutManage" />
        </div>
        <div class="funContent">
          <el-form
            :inline="true"
            size="mini"
            label-position="left"
            label-width="80px"
            :model="layoutManage"
            ref="layoutManageForm"
            :rules="formRules"
          >
            <el-form-item label="项目类型" prop="projectType">
              <el-select v-model="layoutManage.projectType" placeholder="请选择">
                <el-option label="商场" value="商场"></el-option>
                <el-option label="工位" value="工位"></el-option>
                <el-option label="医院" value="医院"></el-option>
                <el-option label="交通" value="交通"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-checkbox
                :indeterminate="isIndeterminate"
                v-model="layoutCheckAll"
                @change="handleCheckAllChange"
              >图层类型全选</el-checkbox>
              <el-checkbox-group
                v-model="layoutManage.layoutType"
                @change="handleCheckedLayoutChange"
              >
                <el-checkbox label="手扶梯" name="type"></el-checkbox>
                <el-checkbox label="直梯" name="type"></el-checkbox>
                <el-checkbox label="楼梯" name="type"></el-checkbox>
                <el-checkbox label="母婴室" name="type"></el-checkbox>
                <el-checkbox label="洗手间" name="type"></el-checkbox>
                <el-checkbox label="残障卫生间" name="type"></el-checkbox>
                <el-checkbox label="ATM" name="type"></el-checkbox>
                <el-checkbox label="客服中心" name="type"></el-checkbox>
                <el-checkbox label="其他设施" name="type"></el-checkbox>
                <el-checkbox label="商铺" name="type"></el-checkbox>
                <el-checkbox label="餐厅" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item size="medium">
              <el-button round @click="closeFun('layoutManage')">取消</el-button>
              <el-button @click="submitLayoutManageForm('layoutManageForm')">确定</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import funTitle from "../../components/funTitle";
import { mapState, mapMutations } from "vuex";
const layoutTypes = [
  "手扶梯",
  "直梯",
  "楼梯",
  "母婴室",
  "洗手间",
  "残障卫生间",
  "ATM",
  "客服中心",
  "其他设施",
  "商铺",
  "餐厅"
];
export default {
  props: {},
  data() {
    return {
      // 输入框中输入的项目名称
      inputProjectName: "",
      // 表格loading
      isLoading: true,
      // 项目列表
      projectList: [],
      // 默认分页
      initPage: 1,
      // 当前所处分页
      nowPageIndex: 0,
      // 每页项目数量
      pageSize: 10,
      // 项目总数数
      totalProject: 0,
      // 所有的项目数据
      allProjectDatas: [],
      // 表格标题
      tableNavList: [
        {
          label: "序号",
          prop: "No",
          width: "60"
        },
        {
          label: "ID",
          prop: "ID",
          width: "60"
        },
        {
          label: "项目名称",
          prop: "projectName",
          width: "180"
        },
        {
          label: "国家",
          prop: "country",
          width: "80"
        },
        {
          label: "省份",
          prop: "province",
          width: "80"
        },
        {
          label: "城市",
          prop: "city",
          width: "80"
        },
        {
          label: "区县",
          prop: "district",
          width: "80"
        },
        {
          label: "经度",
          prop: "longitude",
          width: "80"
        },
        {
          label: "纬度",
          prop: "latitude",
          width: "80"
        },
        {
          label: "项目类型",
          prop: "projectType",
          width: "80"
        },
        {
          label: "操作",
          prop: "oper"
        }
      ],
      tableData: [],
      // 操作列表
      operList: [
        {
          name: "菜单管理",
          type: "menuSetting"
        },
        {
          name: "图层管理",
          type: "layoutManage"
        },
        {
          name: "修改",
          type: "modify"
        },
        {
          name: "import"
        },
        {
          name: "export"
        }
      ],
      // 是否显示功能
      isShowFun: false,
      // 功能菜单显隐设置
      funShow: {
        addProject: false,
        menuSetting: false,
        layoutManage: false,
        modify: false
      },
      // 新增项目表单信息
      addProjectForm: {
        projectName: "",
        country: "",
        province: "",
        city: "",
        district: "",
        time: "",
        longitude: "",
        latitude: "",
        address: "",
        projectType: ""
      },
      // 菜单渲染数据
      menuSettingData: [],
      // 菜单设置表单信息
      menuSettingForm: {
        projectType: "",
        projectID: "",
        menuSetting: {}
      },
      layoutManage: {
        projectType: "",
        layoutType: []
      },
      isIndeterminate: false,
      layoutCheckAll: false,
      // 表单规则
      formRules: {
        projectName: [
          { required: true, message: "请输入项目名称", trigger: "blur" }
        ],
        projectType: [
          { required: true, message: "请选择项目类型", trigger: "change" }
        ]
      }
    };
  },
  computed: {
    // vuex登录模块state 接口数据
    ...mapState("login", {
      interface: state => state.interface
    }),
    updateSearchInput() {
      return this.inputProjectName;
    }
  },
  created() {
    this.initProjectServeData(0);
  },
  mounted() {},
  watch: {
    updateSearchInput(newVal, oldVal) {
      if (newVal === "") {
        this.initProjectServeData(this.nowPageIndex);
      }
    }
  },
  methods: {
    // 获取项目接口数据
    initProjectServeData(pageIndex) {
      const that = this;
      that.projectList = [];
      this.Axios.get(`${this.interface}getAllPj`)
        .then(res => {
          if (res.data.code != 200) {
            this.$message.error("抱歉,项目数据请求失败");
          } else {
            that.totalProject = res.data.v.length;
            that.allProjectDatas = this.Utils.groupProjectArray(
              res.data.v,
              that.pageSize
            );
            res.data.v.forEach(project => {
              that.projectList.push({
                value: project.projectName
              });
            });
            that.genTableView(pageIndex);
            this.isLoading = false;
          }
        })
        .catch(error => {
          this.$message.error("抱歉,项目数据请求异常");
        });
    },
    // 获取菜单数据
    initMenuServeDatas(projectType, projectID, callback) {
      const that = this;
      that.menuSettingData = [];
      that.menuSettingForm.projectType = projectType;
      that.menuSettingForm.projectID = projectID;
      const menuSetting = {};
      this.Axios.get(`${this.interface}findMenuOptions?menuType=${projectType}`)
        .then(res => {
          if (res.data.code != 200) {
            this.$message.error("抱歉,项目数据请求失败");
          } else {
            res.data.v[0].child.forEach((menuLi, index) => {
              menuSetting[`menuLi${index}`] = [];
              that.menuSettingData.push({
                label: menuLi.menuName,
                model: `menuLi${index}`,
                menuChild: menuLi.child
              });
            });
            that.menuSettingForm.menuSetting = menuSetting;
            callback();
          }
        })
        .catch(error => {
          this.$message.error("抱歉,项目数据请求异常");
        });
    },
    // 新增项目
    postProjectData(callback) {
      this.Axios({
        method: "post",
        url: `${this.interface}createPj`,
        params: {
          projectName: this.addProjectForm.projectName,
          country: this.addProjectForm.country,
          province: this.addProjectForm.province,
          city: this.addProjectForm.city,
          district: this.addProjectForm.district,
          address: this.addProjectForm.address,
          longitude: this.addProjectForm.longitude,
          latitude: this.addProjectForm.latitude,
          businessHours: this.addProjectForm.time,
          pjType: this.addProjectForm.projectType
        }
      })
        .then(res => {
          if (res.data.code == 200) {
            callback("ok");
          } else {
            callback("error");
          }
        })
        .catch(error => {
          callback("error");
        });
    },
    // 生成表格视图
    genTableView(pageIndex) {
      const that = this;
      this.tableData = [];
      this.allProjectDatas[pageIndex].forEach((project, index) => {
        that.tableData.push({
          No: index + 1,
          ID: project.id,
          projectName: project.projectName,
          country: project.country ? project.country : "-",
          province: project.province ? project.province : "-",
          city: project.city ? project.city : "-",
          district: project.district ? project.district : "-",
          longitude: project.longitude ? project.longitude : "-",
          latitude: project.latitude ? project.latitude : "-",
          projectType: project.pjType ? project.pjType : "-",
          address: project.address,
          businessHours: project.businessHours
        });
      });
    },
    // 搜索框检索
    querySearch(queryString, callback) {
      const results = queryString
        ? this.projectList.filter(this.createFilter(queryString))
        : this.projectList;

      callback(results);
    },
    // 搜索筛选
    createFilter(queryString) {
      return results => {
        return (
          results.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
        );
      };
    },
    // 输入框检索完毕选中事件
    handleSelect(item) {
      const that = this;
      this.tableData = [];
      this.allProjectDatas.forEach(projectGroup => {
        projectGroup.forEach(project => {
          if (project.projectName === item.value) {
            that.tableData.push({
              No: 1,
              ID: project.id,
              projectName: project.projectName,
              country: project.country ? project.country : "-",
              province: project.province ? project.province : "-",
              city: project.city ? project.city : "-",
              district: project.district ? project.district : "-",
              longitude: project.longitude ? project.longitude : "-",
              latitude: project.latitude ? project.latitude : "-",
              projectType: project.pjType ? project.pjType : "-",
              address: project.address,
              businessHours: project.businessHours
            });
            that.totalProject = 1;
          }
        });
      });
    },
    clearSearchInput() {
      if (this.inputProjectName.length !== 0) {
        this.inputProjectName = "";
      }
    },
    // 切换分页触发函数
    handleCurrentChange(val) {
      this.genTableView(val - 1);
      this.nowPageIndex = val - 1;
    },
    // 关闭功能弹窗
    closeFun(funType) {
      this.isShowFun = false;
      this.funShow[funType] = false;
      // 重置新增项目内容
      this.addProjectForm = {
        projectName: "",
        country: "",
        province: "",
        city: "",
        district: "",
        time: "",
        longitude: "",
        latitude: "",
        address: "",
        projectType: ""
      };
      // 重置图层管理表单内容
      this.layoutManage = {
        projectType: "",
        layoutType: []
      };
    },
    // 增加项目
    addProject() {
      this.isShowFun = true;
      this.funShow.addProject = true;
    },
    // 新增项目表单提交以及验证
    submitAddProjectForm(formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) {
          return false;
        } else {
          this.postProjectData(msg => {
            if (msg === "ok") {
              // 重置内容
              this.addProjectForm = {
                projectName: "",
                country: "",
                province: "",
                city: "",
                district: "",
                time: "",
                longitude: "",
                latitude: "",
                address: "",
                projectType: ""
              };
              this.closeFun("addProject");
              this.$message({
                message: "新增成功",
                type: "success"
              });
              this.initProjectServeData(this.nowPageIndex);
            } else {
              this.$message.error("抱歉,新增异常,请重试");
            }
          });
        }
      });
    },
    // 修改项目表单
    submitModifyForm(formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) {
          return false;
        } else {
          // 重置内容
          this.addProjectForm = {
            projectName: "",
            country: "",
            province: "",
            city: "",
            district: "",
            time: "",
            longitude: "",
            latitude: "",
            address: "",
            projectType: ""
          };
          this.closeFun("modify");
          this.$message({
            message: "修改成功",
            type: "success"
          });
        }
      });
    },
    // 菜单管理表单提交以及验证
    submitMenuSettingForm(formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) {
          return false;
        } else {
          const menuArr = [];
          for (let menu in this.menuSettingForm.menuSetting) {
            menuArr.push(this.menuSettingForm.menuSetting[menu]);
          }
          this.Axios({
            method: "post",
            url: `${this.interface}setUpMapMenu`,
            params: {
              pid: this.menuSettingForm.projectID,
              menuids: menuArr.join(",")
            }
          })
            .then(res => {
              if (res.data.code == 200) {
                this.closeFun("menuSetting");
                this.$message({
                  message: "设置成功",
                  type: "success"
                });
              } else {
                this.$message.error("抱歉,设置失败，请重试");
              }
            })
            .catch(error => {
              this.$message.error("抱歉,设置出现异常");
            });
        }
      });
    },
    // 全选图层类型
    handleCheckAllChange(val) {
      this.layoutManage.layoutType = val ? layoutTypes : [];
      this.isIndeterminate = false;
    },
    // 图层类型改变时处理
    handleCheckedLayoutChange(val) {
      let checkedCount = val.length;
      this.checkAll = checkedCount === layoutTypes.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < layoutTypes.length;
    },
    // 图层管理表单提交以及验证
    submitLayoutManageForm(formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) {
          return false;
        } else {
          // 重置内容
          this.layoutManage = {
            projectType: "",
            layoutType: []
          };
          this.closeFun("layoutManage");
          this.$message({
            message: "设置成功",
            type: "success"
          });
        }
      });
    },
    // 打开功能弹窗
    handleEdit(index, row, type) {
      console.log("row", row);
      switch (type) {
        // 菜单管理
        case "menuSetting":
          {
            this.initMenuServeDatas(row.projectType, row.ID, () => {
              this.isShowFun = true;
              this.funShow[type] = true;
            });
          }
          break;
        // 修改
        case "modify":
          {
            this.addProjectForm = {
              projectName: row.projectName,
              country: row.country && row.country != "-" ? row.country : "",
              province: row.province && row.province != "-" ? row.province : "",
              city: row.city && row.city != "-" ? row.city : "",
              district: row.district && row.district != "-" ? row.district : "",
              time: row.businessHours,
              longitude:
                row.longitude && row.longitude != "-" ? row.longitude : "",
              latitude: row.latitude && row.latitude != "-" ? row.latitude : "",
              address: row.address,
              projectType:
                row.projectType && row.projectType != "-" ? row.projectType : ""
            };

            this.isShowFun = true;
            this.funShow[type] = true;
          }
          break;
        // 图层管理
        case "layoutManage":
          {
            this.isShowFun = true;
            this.funShow[type] = true;
          }
          break;
      }
    },
    // 导入cmp文件
    importCmp() {},
    // 导出cmp文件
    exportCmp() {}
  },
  components: {
    funTitle
  }
};
</script>

<style lang="less">
#projectManage {
  position: relative;
  width: 100%;
  height: 100%;
  .navBar {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 80px;
    background-color: #fff;
    -webkit-user-select: none;
    .projectSearch {
      position: absolute;
      width: 350px;
      height: 80px;
      top: 50%;
      left: 16px;
      transform: translateY(-50%);
      span {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 66px;
        height: 18px;
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        color: rgba(56, 56, 56, 1);
      }
      .searchInput {
        position: absolute;
        left: 72px;
        top: 50%;
        transform: translateY(-50%);
        width: 240px;
        height: 30px;
        .el-autocomplete {
          position: relative;
          width: 100%;
          height: 100%;
          .el-input {
            width: 100%;
            height: 100%;
            .el-input__inner {
              width: 100%;
              height: 100%;
              border-radius: 15px;
              background: rgba(239, 240, 244, 1);
              font-size: 12px;
              border: 1px solid #dcdfe6;
            }
            .el-input__inner:focus {
              border: 1px solid #5d69bd;
            }
          }
        }
        span {
          transition: all 0.5s;
        }
        .icon-search {
          position: absolute;
          width: 15px;
          height: 15px;
          top: 50%;
          left: 210px;
          transform: translateY(-50%);
          background: url("../../assets/images/search.png") no-repeat center;
          background-size: contain;
        }
        .icon-clear {
          position: absolute;
          width: 15px;
          height: 15px;
          top: 50%;
          left: 210px;
          transform: translateY(-50%);
          background: url("../../assets/images/clear.png") no-repeat center;
          background-size: contain;
          cursor: pointer;
        }
      }
    }
    .add {
      position: absolute;
      width: 100px;
      height: 30px;
      border: 1px solid rgba(93, 105, 189, 1);
      box-shadow: 0px 0px 14px #dee2f3;
      opacity: 1;
      border-radius: 18px;
      right: 36px;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(93, 105, 189, 1);
      transition: all 0.5s;
      cursor: pointer;
      &:hover {
        color: #fff;
        background-color: #5d69bd;
        span:nth-child(1) {
          background-image: url("../../assets/images/addHover.png");
        }
      }
      span:nth-child(1) {
        position: absolute;
        width: 15px;
        height: 15px;
        top: 51%;
        left: 24px;
        transform: translateY(-50%);
        background: url("../../assets/images/add.png") no-repeat center;
        background-size: contain;
        transition: all 0.5s;
      }
      span:nth-child(2) {
        position: absolute;
        font-size: 14px;
        height: 20px;
        line-height: 20px;
        left: 45px;
        top: 50%;
        transform: translateY(-50%);
        letter-spacing: 2px;
      }
    }
  }
  .content {
    position: absolute;
    top: 100px;
    left: 0px;
    width: 98.6%;
    height: 85.2%;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(236, 238, 249, 1);
    .projectTabel {
      position: absolute;
      left: 50%;
      top: 20px;
      transform: translateX(-50%);
      width: 98.2%;
      height: 770px;
      .el-table {
        .el-table--striped .el-table__body tr.el-table__row--striped td {
          background: rgba(248, 249, 250, 1);
        }
        thead {
          color: rgba(0, 12, 23, 1);
        }
        td,
        th.is-leaf {
          border-bottom: 0px;
        }
        td {
          padding: 20px 0;
        }
        th {
          background: rgba(239, 240, 244, 1);
        }
      }
      .is-round {
        color: rgba(93, 105, 189, 1);
        font-size: 12px;
        font-weight: 400;
        border: 1px solid rgba(93, 105, 189, 1);
        transition: all 0.5s;
        &:hover {
          color: #fff;
          background-color: #5d69bd;
        }
      }
      .is-circle {
        color: rgba(93, 105, 189, 1);
        background: rgba(236, 238, 249, 1);
        border: 0px;
        transition: all 0.5s;
        &:hover {
          color: #fff;
          background-color: #5d69bd;
        }
      }
    }
    .pagination {
      position: absolute;
      bottom: 44px;
      right: 20px;
      .el-pagination__total {
        border: 1px solid rgba(219, 219, 219, 1);
        color: rgba(92, 92, 92, 1);
        border-radius: 12px;
        width: 102px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        margin-top: 3px;
        font-size: 12px;
      }
      .el-pagination__jump {
        position: relative;
        .el-input__inner {
          border-radius: 12px;
          width: 38px;
          height: 24px;
          line-height: 24px;
          color: rgba(92, 92, 92, 1);
          font-size: 12px;
          &:hover {
            border: 1px solid #5d69bd;
          }
        }
        .el-input__inner:focus {
          border: 1px solid #5d69bd;
        }
      }
      .el-pager {
        margin-top: 2px;
        li {
          position: relative;
          width: 24px;
          height: 24px;
          min-width: 0px;
          line-height: 24px;
          margin-left: 5px;
          transition: all 0.5s;
          &:hover {
            color: #5d69bd;
          }
        }
        li.active {
          background: rgba(93, 105, 189, 1);
          opacity: 1;
          border-radius: 50%;
          color: #fff;
        }
        .el-icon-d-arrow-left:before {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
        .el-icon-d-arrow-right:before {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
      .btn-prev:hover,
      .btn-next:hover {
        color: #5d69bd;
      }
    }
  }
  .functionList {
    position: absolute;
    top: 100px;
    left: 0px;
    width: 98.6%;
    height: 85.2%;
    background: rgba(0, 12, 23, 0.2);
    box-shadow: 0px 0px 19px rgba(36, 176, 171, 0.11);
    z-index: 100;
    // 取消提交按钮
    .el-form-item--medium {
      position: absolute;
      width: 210px;
      right: 0;
      bottom: -10px;
      .el-button {
        width: 88px;
        height: 32px;
        border-radius: 17px;
        text-align: center;
        padding: 0;
        background: rgba(93, 105, 189, 1);
        color: #fff;
        &:hover {
          border: 1px solid #5d69bd;
        }
      }
      .is-round {
        background: rgba(236, 238, 249, 1);
        color: #5d69bd;
      }
    }
    .formContent {
      position: absolute;
      left: 50%;
      top: 43%;
      transform: translate(-50%, -50%);
      width: 700px;
      height: 400px;
      background: rgba(255, 255, 255, 1);
      border-radius: 6px;
      .top {
        width: 100%;
        height: 30px;
        margin-top: 11px;
      }
      .funContent {
        margin: 0 auto;
        padding-top: 20px;
        width: 638px;
        height: 280px;
        border-bottom: 1px solid rgba(226, 235, 243, 1);
      }
    }
    .menuSetting {
      .el-form-item--medium {
        width: 300px;
      }
    }
    .layoutManage {
      .el-checkbox-group {
        width: 80%;
        margin: 20px auto;
      }
    }
  }
}
</style>
